import React, { useEffect } from 'react';
import { Card, Space, Button, Divider, Typography, Tabs } from 'antd';
import { FireOutlined, CommentOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import useGetGeolocation from 'react-exact-geolocation/useGetGeolocation';

import { getLocationApi } from '@/api/city';
import { setCityCode } from '@/store/reducers/uLocation';
import { COLOR_THEME } from '@/config/theme';
import { ReactComponent as LocationIcon } from '@/assets/images/icons/LocationIcon.svg';
import Thread from '../thread/Thread';
import './index.scss';
import Suggestion from '../suggestion/Suggestion';
const onChange = (key) => {
    console.log(key);
};
const items = [
    // {
    //   key: '1',
    //   label:  (
    //     <span style={{ fontSize: 16, fontFamily: "'STXingkai', cursive" }}>
    //       <FireOutlined style={{ marginRight: 8 }} />
    //       推荐
    //     </span>
    //   ),
    //   children: <Suggestion />
    // },
    {
        key: '2',
        label: (
            <span style={{ fontSize: 16, fontFamily: "'STXingkai', cursive" }}>
                <CommentOutlined style={{ marginRight: 8 }} />
                交流
            </span>
        ),
        children: <Thread />,
    },
];
function Community() {
    // const [ key, setKey ] = React.useState('');
    // const [ cityName, setCityName ] = React.useState('');
    // const dispatch = useDispatch();
    // const {
    //   position,
    //   country,
    //   province,
    //   city,
    //   cityCode,
    //   district,
    //   township,
    //   error,
    //   loading
    // } = useGetGeolocation(key);

    // const loadLocationData  = async () => {
    //   try {
    //     const res = await getLocationApi();
    //     if(res.code === 200){
    //       setKey(res.data.key);
    //     }
    //   } catch (err) {
    //     console.error('获取密钥失败:', err);
    //   }
    // };
    // useEffect(() => {
    //   if (city) {
    //     setCityName(city);
    //     dispatch(setCityCode(cityCode));
    //   }
    // }, [city]);

    // useEffect(() => {
    //   loadLocationData();
    // }, []);

    return (
        <div
            className="cultPop-container"
            style={{
                backgroundColor: `${COLOR_THEME.BG_SECONDARY}`,
            }}
        >
            <Card className="cultPop-card">
                {/* <Tabs 
          defaultActiveKey="1" 
          items={items} 
          onChange={onChange}
          tabBarStyle={{ 
            marginTop: 0,
            marginBottom: 4
        }}
        // tabBarExtraContent={
        //   <div
        //     style={{
        //       display: 'flex',
        //       alignItems: 'center',
        //       cursor: 'pointer'
        //     }}
        //   >
        //       <LocationIcon
        //         className={`location-icon ${loading ? 'bounce-icon' : ''}`}
        //         style={{
        //           width: 24,
        //           height: 24
        //         }}
        //       />
        //       <span style={{ paddingLeft: 5 }}>{cityName}</span>
        //   </div>
        // }
        /> */}
                <Thread />
            </Card>
        </div>
    );
}
export default Community;
